<template>
	<div class="dashboard">
		<div class="title">
			<h1>库存预警</h1>
		</div>
		<div class="card" v-loading="loading">
			<el-card v-for="item in products" :key="item.id">
				<el-image :src="item.image" fit="contain" />
				<div class="card-title">{{ item.name }}</div>
				<div class="card-code">{{ item.itemCode }}</div>
				<div class="card-num">数量：{{ item.quantity }} {{ item.unit }}</div>
			</el-card>
		</div>
		<el-empty v-if="products.length === 0" description="暂无库存预警" />
	</div>
</template>

<script setup>
import api from '@/request/index'

let loading = ref(false)
let products = ref([])

onMounted(() => {
	getProducts()
})

const getProducts = async () => {
	try {
		loading.value = true
		const { data } = await api.getLowStockProducts()
		products.value = data
	} catch (error) {
		console.log(error)
	} finally {
		loading.value = false
	}
}
</script>

<style scoped lang="less">
.dashboard {
	width: 100%;
}

.title {
	width: 100%;
	padding: 0 5px;
	margin-bottom: 20px;
}

.card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
  gap: 10px;

	.el-card {
		width: 180px;
		height: 240px;

		::v-deep(.el-card__body) {
			display: flex;
			gap: 10px;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}

		.el-image {
			width: 100px;
			height: 100px;
		}

		.card-title {
			font-size: 16px;
			font-weight: bold;
		}

		.card-code {
			font-size: 14px;
			color: #999;
		}

		.card-num {
			font-size: 14px;
			color: #999;
			color: red;
		}
	}
}
</style>
